<template>
  <!-- 本地：icon-xx -->
  <svg-icon
    v-if="iconMode === 'local'"
    :name="iconName"
    :style="iconStyle"
    v-bind="$attrs"
  />
  <!-- icon-park：i-xx -->
  <component
    v-if="iconMode === 'park'"
    :is="name"
    :theme="theme"
    :size="propSize"
    :spin="spin"
    :fill="relFill"
    :strokeLinecap="strokeLinecap"
    :strokeLinejoin="strokeLinejoin"
    :strokeWidth="strokeWidth"
    :style="{
      cursor: isHoverCursor && isHover ? 'pointer' : '',
      zIndex: zIndex
    }"
    @mouseenter.stop.prevent="onMouseenter"
    @mouseleave.stop.prevent="onMouseleave"
    v-bind="$attrs"
  />
</template>

<script setup lang="ts">
  import { getRelIconInfo } from '@/utils/icon'
  import { getActivateColor, getIconColor, getIconReverseColor } from '@/hooks'
  import { useTheme } from '@/store/modules/theme'
  import { darkMode as darkModeMenu } from '~/types/theme'

  export interface PropsType {
    name: string
    theme?: string
    size?: number | string
    spin?: boolean
    fill?: string | Array<any>
    strokeLinecap?: string
    strokeLinejoin?: string
    strokeWidth?: number
    isHoverCursor?: boolean
    isHoverPrimary?: boolean
    primary?: boolean
    defaultPrimary?: string
    defaultLightPrimary?: string
    defaultDarkPrimary?: string
    themeReverse?: boolean
    zIndex?: number
    style?: object
  }
  const props = withDefaults(defineProps<PropsType>(), {
    theme: 'outline',
    size: '1em',
    spin: false,
    fill: 'currentColor',
    strokeLinecap: 'outline',
    strokeLinejoin: 'round',
    strokeWidth: 4,
    isHoverCursor: true,
    isHoverPrimary: false,
    primary: false,
    themeReverse: false,
    zIndex: 1,
    style: () => ({})
  })
  const { color: primaryColor } = getActivateColor()
  const iconColor = getIconColor()
  const iconReverseColor = getIconReverseColor()
  const emits = defineEmits(['mouseenter', 'mouseleave'])

  const themePark = useTheme()

  const isHover = ref(false)
  const onMouseenter = () => {
    isHover.value = true
    emits('mouseenter')
  }

  const onMouseleave = () => {
    isHover.value = false
    emits('mouseleave')
  }

  const iconName = computed(() => {
    return getRelIconInfo(props.name).iconName
  })

  const iconMode = computed(() => {
    return getRelIconInfo(props.name).iconMode
  })

  const iconStyle = computed(() => {
    return {
      cursor: props.isHoverCursor && isHover ? 'pointer' : '',
      zIndex: props.zIndex,
      fontSize: props.size + 'px',
      ...props.style
    }
  })

  const relFill = computed(() => {
    const {
      fill,
      isHoverPrimary,
      primary,
      defaultPrimary,
      defaultLightPrimary,
      defaultDarkPrimary,
      themeReverse
    } = props
    const themeColor =
      themePark.darkMode === darkModeMenu.DARK
        ? defaultDarkPrimary || iconColor.value
        : defaultLightPrimary || iconColor.value
    const themeReverseColor =
      themePark.darkMode === darkModeMenu.DARK
        ? defaultLightPrimary || iconReverseColor.value
        : defaultDarkPrimary || iconReverseColor.value
    if (fill === 'currentColor') {
      return (isHover.value && isHoverPrimary) || primary
        ? defaultPrimary || primaryColor.value
        : themeReverse
        ? themeReverseColor
        : themeColor
        ? iconColor.value
        : iconReverseColor.value
    } else {
      return fill
    }
  })
  const propSize = computed<string>(() => {
    return typeof props.size === 'number'
      ? `${String(props.size)}px`
      : String(props.size)
  })
</script>

<style lang="less" scoped>
  :deep(.i-icon) {
    svg {
      display: inline;
      vertical-align: middle;
    }
  }

  :deep(.i-icon) {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
